<template>
    <div id="box">
        <div id="nav">
            <Navbar >
                <span @click="back" slot="left"><img src="static/icons/back.png" @click="back" id="back"></span>
                <span slot="center" class="nav-size">填写订单</span>
            </Navbar>
        </div>
            <div id="content-box">
                <div  @click="remove">
                    <div id="pay-info">
                        <p>柏林电视塔+贵宾级晚餐</p>
                        <p>出行日期：<span>2017-11-17</span></p>
                        <p>人数：1</p>
                    </div>
                    <span class="span">套餐时间</span>
                    <p>选择套餐</p>
                    <p>入场时间</p>
                    <span class="span">顾客信息</span>
                    <p>游客1人</p>
                </div>
                <span class="span">预订人信息</span>
                <div class="user">
                    <label>姓名：</label>
                    <input @click="showPay"></input>
                </div>
                <div class="user">
                    <label>手机：</label>
                    <input @click="showPay"></input>
                </div>
                <div class="user">
                    <label>邮箱：</label>
                    <input @click="showPay"></input>
                </div>
                <div class="user">
                    <label>留言：</label>
                    <input @click="showPay"></input>
                </div>
            
            </div>
            <div id="pay">
                <span>总额：123</span>
                <span>提交订单</span>
            </div>

    </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
export default {
    data:function(){
        return{
            title:"",
            show:false
        }
    },
    components:{
        Navbar
    },
    methods:{
        back(){
            history.back()
        },
        showPay(){
            var pay =document.getElementById("pay");
            pay.style="height:50px"
        },
        remove(){
            var pay =document.getElementById("pay");
            pay.style="height:0"
        }
    },
    mounted:function(){
        // console.log()
        this.title=this.$route.params.title
    }

}
</script>

<style lang='css' scoped>
    #back{
        width:30px;
        height:30px;
        margin-top:12px;
    }
    #content-box{
        padding-top: 53px;
    }
    #box{
        background-color: #f4f4f4;
        position: relative;
    }
    #nav{
        background-color: #036ab5;
        color: white;
        position: fixed;
        left: 0;
        top: 0;
    }
    #pay-info{
        background-color: #fff;
        margin-top: 3px;

    }

    p{
        display: block;
        height: 50px;
        border-bottom: 1px  solid #eeeeee;
        line-height: 50px;
        color: #6d6d6d;
        margin: 0;
        padding-left: 10px;
        background-color: #fff;
    }
    #pay-info p:nth-of-type(1){
        color: #036ab5;
    }
    .span{
        font-size: 17px;
        color: #036ab5;
        display: block;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
    }
    .user{
        background-color: #fff;
        height: 50px;
        border-bottom: 1px  solid #eeeeee;
        line-height: 50px;
        
    }
    label{
         color: #3d4145;
         padding-left: 10px;
         
    }
    input{
        height: 35px;
        width: 60vw;
        border: none;
    }
    #pay{
        height: 0;
        display: flex;
        /*border: 1px  solid  red;*/
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        transition: all 0.7s;
    }
    #pay span:nth-of-type(1){
        display: block;
        height: 50px;
        width:60%;
        /*border: 1px  solid  red;*/
        background-color: #fff;
        font-size: 17px;
        line-height: 50px;
        color: #fe7467;
        
    }
    #pay span:nth-of-type(2){
        display: block;
        height: 50px;
        width:40%;
        /*border: 1px  solid  red;*/
        background-color: #fe7467;
        font-size: 17px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        
    }

</style>